<template>
  <div class="mask">
    <div class="confirm">
      <div class="info-box">
        <div class="image-box">
          <img :src="priview" alt>
        </div>
        <div class="info">
          <p class="name">{{info.cate_name}}</p>
          <p class="price">￥{{info.price}}</p>
        </div>
      </div>
      <div class="control">
        <ProductNumControl key="confirm"/>
      </div>
      <div class="handle">
        <div class="close" @click="handleClose">取消</div>
        <div class="sure" @click="handleSure">确认</div>
      </div>
    </div>
  </div>
</template>


<script>
import ProductNumControl from "@/components/product/ProductNumControl";
import api from '../../api'


export default {
  props: ["info", "priview"],
  components: { ProductNumControl },
  data() {
    return {
      uid: this.$store.state.uid,
      num: this.$store.state.num
    }
  },
  methods: {
    handleClose() {
      this.$emit("handleClose");
    },
    handleSure() {
      // 提交订单
      // api.order.placeOrder(this.uid, this.info.id, this.num, res => {
      //   console.log(res)
      // })
      

      this.$emit('toPay')
    }
  }
};
</script>

<style lang="less" scoped>
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  .confirm {
    background: #fff;
    width: 100vw;
    height: 62.8vw;
    .info-box {
      display: flex;
      padding: 3vw;
      .image-box {
        width: 30vw;
        height: 30vw;
        margin-right: 3vw;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
      .info {
        .name {
          width: 60vw;
          font-size: 4vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 2vw 0 3vw 0;
        }
        .price {
          font-size: 4.5vw;
          color: #333;
        }
      }
    }

    .control {
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      padding: 3vw;
      font-size: 3.5vw;
    }
    .handle {
      display: flex;
      div {
        padding: 4vw;
        flex: 1;
        text-align: center;
      }
      .close {
        background: #c6c6cb;
        color: #474545;
      }
      .sure {
        background: #008fef;
        color: #fff;
      }
    }
  }
}
</style>